<template>
  <v-scale-screen
    :delay="0"
    :box-style="{
      backgroundColor: '#051735',
    }"
  >
    <div class="srceen-box-bg">
      <Page-title :interval="interval" back />
      <div class="quality m20 pt100">
        <div class="quality-title font32">品质信息——{{ title }}</div>
        <Selector
          :current="dateType"
          :list="typeList"
          :top="50"
          :right="30"
          @change="chnageType"
        />
        <div class="target font15">
          <span v-if="productList.length">目标值({{ productList[1].data[0] }}%)</span>
        </div>
        <div class="h200 pl50 f f-ai-c">
          <div class="quality-left-title f f-col f-ai-c f-jc-c">良品率</div>
          <Line-chart
            cid="product-info"
            :x-axis="xlist"
            :data="productList"
            :type="['bar', 'line', 'line']"
            bar-width="60%"
            :legend="false"
            :tooltip="false"
            grid-top="12%"
            smooth
            :bar-label="[true, false]"
            :colors="[
              ['#F63F3F', 'rgba(246,63,63,0.38)'],
              ['#FFFE54', '#FFFE54'],
              ['#0965A8', '#0965A8'],
            ]"
            :limit-colors="['#30C27C', 'rgba(48,194,124,0.38)']"
          />
        </div>
        <div class="target font15">
          <span v-if="scrappedList.length">目标值({{ scrappedList[1].data[0] }}%)</span>
        </div>
        <div class="h200 pl50 f f-ai-c">
          <div class="quality-left-title f f-col f-ai-c f-jc-c">报废率</div>
          <Line-chart
            cid="scrapped-info"
            :x-axis="xlist"
            :data="scrappedList"
            :type="['bar', 'line', 'line']"
            bar-width="60%"
            :legend="false"
            :tooltip="false"
            grid-top="12%"
            smooth
            :bar-label="[true, false]"
            :colors="[
              ['#30C27C', 'rgba(48,194,124,0.38)'],
              ['#FFFE54', '#FFFE54'],
              ['#0965A8', '#0965A8'],
            ]"
            :limit-colors="['#F63F3F', 'rgba(246,63,63,0.38)']"
          />
        </div>
        <div class="target font15">
          <span v-if="complaintList.length">目标值({{ complaintList[1].data[0] }}%)</span>
        </div>
        <div class="h200 pl50 f f-ai-c">
          <div class="quality-left-title f f-col f-ai-c f-jc-c">客诉率</div>
          <Line-chart
            cid="complaint-info"
            :x-axis="xlist"
            :data="complaintList"
            :type="['bar', 'line', 'line']"
            bar-width="60%"
            :legend="false"
            :tooltip="false"
            grid-top="12%"
            smooth
            :bar-label="[true, false]"
            :colors="[
              ['#30C27C', 'rgba(48,194,124,0.38)'],
              ['#FFFE54', '#FFFE54'],
              ['#0965A8', '#0965A8'],
            ]"
            :limit-colors="['#F63F3F', 'rgba(246,63,63,0.38)']"
            unit="PPM"
            name-location="start"
          />
        </div>
      </div>
    </div>
  </v-scale-screen>
</template>
<script>
import { mapState } from "vuex";
import { qualityWorkshopOverall } from "@/api/srceen/home";
export default {
  data() {
    return {
      dateType: "DAY", // 日期
      typeList: [
        { label: "日", value: "DAY" },
        { label: "周", value: "WEEK" },
        { label: "月", value: "MONTH" },
      ],
      title: "", // 标题
      xlist: [],
      productList: [], // 良品率列表
      scrappedList: [], // 报废率列表
      complaintList: [], // 投诉率列表
    };
  },
  computed: {
    ...mapState({
      interval: (state) => state.app.srceenDelay,
      refresh: (state) => state.app.refresh,
    }),
  },
  watch: {
    refresh() {
      this.getList();
    },
  },
  mounted() {
    const { name } = this.$route.query;
    if (name) this.title = decodeURIComponent(name);
    this.getList();
  },
  methods: {
    // 切换类型
    chnageType(val) {
      this.dateType = val.value;
      this.getList();
    },
    // 获取图表数据
    getList() {
      qualityWorkshopOverall({ dateType: this.dateType }).then((res) => {
        if (res.data) {
          res.data.forEach((item, index) => {
            if (index === 0) {
              this.xlist = item.xaxis || [];
              setTimeout(() => {
                this.productList = [
                  { data: item.actual || [], name: "良品率" },
                  { data: item.target || [], name: "目标" },
                  { data: item.actual || [], name: "" },
                ];
              }, 0);
            }
            if (index === 1) {
              setTimeout(() => {
                this.scrappedList = [
                  { data: item.actual || [], name: "报废率" },
                  { data: item.target || [], name: "目标" },
                  { data: item.actual || [], name: "" },
                ];
              }, 100);
            }
            if (index === 2) {
              setTimeout(() => {
                this.complaintList = [
                  { data: item.actual || [], name: "客诉率" },
                  { data: item.target || [], name: "目标" },
                  { data: item.actual || [], name: "" },
                ];
              }, 200);
            }
          });
        }
      });
      return;
    },
  },
};
</script>
<style lang="scss" scoped>
.srceen-box-bg {
  height: 100%;
  width: 100%;
  background: url("~@/assets/img/bg.png");
  .quality {
    width: 1880px;
    height: 902px;
    background: url("../../../assets/img/bg2.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    .quality-title {
      font-family: YouSheiBlack;
      color: #45f4ff;
      position: absolute;
      left: 50%;
      top: -20px;
      transform: translateX(-50%);
    }
    .quality-left-title {
      font-family: YouSheiBlack;
      font-size: 24px;
      color: #00ffd1;
      letter-spacing: 1px;
      width: 49px;
      height: 199px;
      writing-mode: vertical-lr;
      background: url("../../../assets/home/screen-left-title-bg.png") no-repeat;
      background-size: 100% 100%;
    }
    .target {
      padding-left: 150px;
      color: #fff;
      height: 40px;
      line-height: 40px;
      position: relative;
      &::before {
        content: "";
        width: 20px;
        height: 3px;
        background: #fffe54;
        display: inline-block;
        margin-right: 10px;
        vertical-align: middle;
      }
    }
  }
}
</style>
